import { SetupContext, defineComponent, ref } from 'vue'
import { PaginationEmit, PaginationProps, paginationEmit, paginationProps } from './pagination-types'
import usePagination from './hooks/use-pagination'
import { useNamespace } from '../shared/hooks/useNamespace'
import FsInput from '../input'

export default defineComponent({
  name: 'FsPagination',
  props: paginationProps,
  emits: paginationEmit,
  setup(props: PaginationProps, ctx: SetupContext<PaginationEmit>) {
    const { pageInfo, pageSize, activeRefs, selectOptions, showSelectOptions, dataTotal, moveRealInfo, pageList, clickHandler, changeNavHandle, changeInputHandle } = usePagination(
      props,
      ctx
    )
    const ns = useNamespace('pagination')

    return () => {
      return (
        <div class={[ns.b()]}>
          <div class={[ns.m('total-size')]}>共{dataTotal.value}条</div>
          <ul class={[ns.m('page-items')]}>
            <li class={[ns.m('page-item')]} onClick={(e) => changeNavHandle('first')}>
              <div class={[ns.m('nav')]}>
                <i class="fa fa-angle-double-left"></i>
              </div>
            </li>
            <li class={[ns.m('page-item')]} onClick={(e) => changeNavHandle('prev')}>
              <div class={[ns.m('nav')]}>
                <i class="fa fa-angle-left"></i>
              </div>
            </li>
            {pageList.value.map((item, index) => {
              return (
                <li class={[ns.m('page-item')]} onClick={(e) => clickHandler(e, item)}>
                  <div ref={(el) => (activeRefs.value[index] = el as HTMLDivElement)} class={[ns.is('active', pageInfo.pageCurrInfo.pageNum === item.pageNum)]}></div>
                  <a>{item.displayText}</a>
                </li>
              )
            })}
            <li class={[ns.m('page-item')]} onClick={(e) => changeNavHandle('next')}>
              <div class={[ns.m('nav')]}>
                <i class="fa fa-angle-right"></i>
              </div>
            </li>
            <li class={[ns.m('page-item')]} onClick={(e) => changeNavHandle('last')}>
              <div class={[ns.m('nav')]}>
                <i class="fa fa-angle-double-right"></i>
              </div>
            </li>
          </ul>
          <div class={[ns.m('jump')]}>
            跳至
            <FsInput modelValue={pageInfo.pageCurrInfo.pageNum} onChange={(pNum: number) => changeInputHandle(pNum)}></FsInput>页
          </div>
        </div>
      )
    }
  }
})
